<template>
  <div>
    <zbTable
      ref="tableRef"
      :api-fun="get_list"
      @getselection="getselection"
      @action="action"
    >
      <template #toolbar>
        <a-space>
          <template v-if="delArrShow">
            <a-button class="ele-btn-icon" @click="delArrHide()"
              ><span>取消</span></a-button
            >
            <a-button
              type="primary"
              danger
              ghost
              class="ele-btn-icon"
              @click="delArrFun()"
              ><span>确认删除</span></a-button
            >
          </template>
        </a-space>
      </template>
    </zbTable>
    <!-- 新建弹窗 -->
    <add v-if="showAdd" v-model:visible="showAdd" @done="done" />
    <!-- 编辑弹窗 -->
    <edit
      v-if="showEdit"
      :editId="editId"
      v-model:visible="showEdit"
      @done="done"
    />
    <!-- 回收站弹窗 -->
    <recycle v-if="showRecycle" v-model:visible="showRecycle" @done="done" />
    <a-modal
      v-model:visible="popconfirm"
      title="提示"
      centered
      :width="260"
      @ok="delFun"
    >
      <p>删除后请在回收站内恢复</p>
    </a-modal>
  </div>
</template>
<script setup>
  import { ref, reactive, onMounted } from 'vue';
  import zbTable from '@/components/zbTable/materialIndex.vue';
  import { message } from 'ant-design-vue';
  import { get_list, delArr } from '@/api/material/brand';
  import add from './components/add.vue';
  import edit from './components/edit.vue';
  import recycle from './components/recycle.vue';

  const loading = ref(false);
  const showAdd = ref(false);
  const showEdit = ref(false);
  const editId = ref(null);
  const popconfirm = ref(false);
  const delArrShow = ref(false); //批量删除确认弹框
  const delArrData = ref([]); //批量删除的id
  const showRecycle = ref(false);

  // 获取子组件
  const tableRef = ref(null);

  const done = () => {
    reloadTable();
  };
  const reloadTable = () => {
    showAdd.value = false;
    showEdit.value = false;
    tableRef.value.changeSelection(false);
    tableRef.value.reload();
  };
  //单个删除
  const delFun = () => {
    delArr({ id: delArrData.value })
      .then((res) => {
        message.success(res.msg);
        popconfirm.value = false;
        reloadTable();
        loading.value = false;
      })
      .catch((e) => {
        message.error(e);
        loading.value = false;
      });
  };
  const delArrHide = () => {
    tableRef.value.changeSelection(false);
    delArrShow.value = false;
  };
  const delArrOpt = () => {
    tableRef.value.changeSelection(true);
    delArrShow.value = true;
  };
  //批量删除
  const delArrFun = () => {
    delArr({ id: delArrData.value })
      .then((res) => {
        message.success(res.msg);
        delArrHide();
        reloadTable();
        loading.value = false;
      })
      .catch((e) => {
        message.error(e);
        loading.value = false;
      });
  };
  //获取选中的行
  const getselection = (val) => {
    delArrData.value = [];
    val.value.map((item) => {
      delArrData.value.push(item.id);
    });
  };
  const action = (data) => {
    if (data.action_data.type == 'add') {
      showAdd.value = true;
    }
    if (data.action_data.type == 'recycling') {
      showRecycle.value = true;
    }
    if (data.action_data.type == 'edit') {
      showEdit.value = true;
      editId.value = data.row_data.id;
    }
    if (data.action_data.type == 'delete') {
      if (data.action_data.mold == 'more') {
        delArrOpt();
      } else {
        delArrData.value = [];
        delArrData.value.push(data.row_data.id);
        popconfirm.value = true;
      }
    }
  };
</script>
